import React, { useEffect, useState } from 'react'
import { Table,Image, Button } from 'antd'
import {getBannerList, delBannerFn} from '../../api/banner'

const Index = () => {

  const [bannerList,setBannerList] = useState()

  useEffect(()=>{

    getBannerList().then(res => {
      // console.log(res);
      setBannerList(res.data)
    })

    return ()=>{ 
      // 清除副作用
     }
  },[])




  const columns = [
    {
      title: '序号',
      render(t,r,i){
        return <span>{i + 1}</span>
      }
    },
    {
      title: '图片',
      dataIndex: 'img',
      render(t,r){
        return <Image src={t} height={60} alt={r.alt} />
      }
    },
    {
      title: '链接',
      dataIndex: 'link'
    }, {
      title: '提示',
      dataIndex: 'alt'
    }, {
      title: '操作',
      render(t){
        return <Button onClick={()=>{
          delBannerClick(t)
        }}>删除</Button>
      }
    }
  ]

  // 删除轮播图的点击事件
  function delBannerClick(banner){
    console.log(banner);
    delBannerFn({
      bannerid: banner.bannerid
    }).then(res => {
      console.log(res);

      // 重新获取轮播图最新数据
      getBannerList().then(res => {
        // console.log(res);
        setBannerList(res.data)
      })
    })
  }


  return (
    <div>
      <h1>轮播图列表</h1>
      <Table 
      dataSource={bannerList} 
      rowKey={'bannerid'} 
      columns={columns}
      />
    </div>
  )
}

export default Index